import { useState, useEffect } from 'react'
import { NavLink, useNavigate, useLocation } from 'react-router-dom'
import { Sticky } from 'react-vant';
import { UploadOutline, HeartOutline, TeamFill, CameraOutline, TruckOutline } from 'antd-mobile-icons'
import { Popup, Swiper,Calendar } from 'antd-mobile'
import { Shop, Cart, BarChartO, Logistics } from '@react-vant/icons';
import AMapExample from './map'
import dayjs from 'dayjs'
import "./date.less"
import Home from '../../api/home';
import style from './style.module.scss'

const { header, footer, showBtn, user, userBtn, nav, banner, btn, wishHeader, wishMain, bannerbtn } = style

const today = dayjs()

const App = () => {
  const location = useLocation()
  console.log(location.state);
  const navgitate = useNavigate()
  const [show, setShow] = useState(false)
  const [list, setList] = useState<any[]>([])
  const [evaluate, setEvaluate] = useState([])
  const [visible1, setVisible1] = useState(false)
  const [height, setHeight] = useState(78)
  const [goods, setGoods] = useState<any[]>([])
  const [val, setVal] = useState<any>(today.toDate())
  const [scrollTop1,setScrollTop1]=useState(0)
  const [date, setDate] = useState("添加日期")

  const {banners}=location.state.proinformation
  const getList = async () => {
    let res = await Home['getGoods']()
    console.log(res);
    setList(res.data)
    console.log(list);
  }

  const getFound = async () => {
    let res = await Home['getFound']()
    console.log(res.data);
    setEvaluate(res.data)
  }
  const getGoods = async () => {
    let res = await Home['getGoods']()
    console.log(res.data);
    setGoods(res.data)
  }
  useEffect(() => { getList()  }, [])
  useEffect(() => { getFound() }, [])
  useEffect(() => { getGoods() }, [])
  const Whell = (e: any) => {
    var y = window.scrollY; 
    console.log(y);
    //   console.log(e);
    if (e.deltaY > 0) {
      console.log('向下');
      setHeight(0)
    } else {
      console.log('向上');
      setHeight(78)
    }
  }
  const items = goods.slice(2,7).map((item, index) => (
    <Swiper.Item key={index}>
      <div style={{ width: "339px", height: "336px", marginTop: "20px" }}>
        <img style={{ width: "327px", height: "218px" }} src={item.banners[0]} alt="" />
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "20px" }}><b>{item.proname}</b></div>
        <div><span>￥</span><span>{item.distance}</span>每晚</div>
        <div style={{ marginTop: "10px" }}>  ★★★★★ {item.score}</div>
      </div>
    </Swiper.Item>
    
  ))
  console.log(goods);

  const go = () => {
    navgitate('/pay', { state: { go: location.state } })
  }
  const goposition=()=>{
    setScrollTop1(2000)
     document.body.scrollTop = 2000;
     document.documentElement.scrollTop = 2000;
  }
  const godetails=()=>{
     document.body.scrollTop = 480;
     document.documentElement.scrollTop = 480;
  }
  const goevaluate=()=>{
    document.body.scrollTop = 1050;
    document.documentElement.scrollTop = 1050;
  }
  const gonotice=()=>{
    document.body.scrollTop = 2780;
    document.documentElement.scrollTop = 2780;
  }
  const goedate=()=>{
    document.body.scrollTop = 1514;
    document.documentElement.scrollTop = 1514;
  }
  const golandlord=()=>{
    document.body.scrollTop = 3380;
    document.documentElement.scrollTop = 3380;
  }
  return (<body   onWheel={(e) => Whell(e)}>
    <div   style={{  transition: "all 0.6s ease"}}>
      {/* 头部 */}
      <div className={header}  >
        <div onClick={() => navgitate("/")}><svg width="30" height="32" style={{ display: "block", color: "#FF385C" }}><path d="M29.3864 22.7101C29.2429 22.3073 29.0752 21.9176 28.9157 21.5565C28.6701 21.0011 28.4129 20.4446 28.1641 19.9067L28.1444 19.864C25.9255 15.0589 23.5439 10.1881 21.0659 5.38701L20.9607 5.18316C20.7079 4.69289 20.4466 4.18596 20.1784 3.68786C19.8604 3.0575 19.4745 2.4636 19.0276 1.91668C18.5245 1.31651 17.8956 0.833822 17.1853 0.502654C16.475 0.171486 15.7005 -9.83959e-05 14.9165 4.23317e-08C14.1325 9.84805e-05 13.3581 0.171877 12.6478 0.503224C11.9376 0.834571 11.3088 1.31742 10.8059 1.91771C10.3595 2.46476 9.97383 3.05853 9.65572 3.68858C9.38521 4.19115 9.12145 4.70278 8.8664 5.19757L8.76872 5.38696C6.29061 10.1884 3.90903 15.0592 1.69015 19.8639L1.65782 19.9338C1.41334 20.463 1.16057 21.0102 0.919073 21.5563C0.75949 21.9171 0.592009 22.3065 0.448355 22.7103C0.0369063 23.8104 -0.094204 24.9953 0.0668098 26.1585C0.237562 27.334 0.713008 28.4447 1.44606 29.3804C2.17911 30.3161 3.14434 31.0444 4.24614 31.4932C5.07835 31.8299 5.96818 32.002 6.86616 32C7.14824 31.9999 7.43008 31.9835 7.71027 31.9509C8.846 31.8062 9.94136 31.4366 10.9321 30.8639C12.2317 30.1338 13.5152 29.0638 14.9173 27.5348C16.3194 29.0638 17.6029 30.1338 18.9025 30.8639C19.8932 31.4367 20.9886 31.8062 22.1243 31.9509C22.4045 31.9835 22.6864 31.9999 22.9685 32C23.8664 32.002 24.7561 31.8299 25.5883 31.4932C26.6901 31.0444 27.6554 30.3161 28.3885 29.3804C29.1216 28.4447 29.5971 27.3341 29.7679 26.1585C29.9287 24.9952 29.7976 23.8103 29.3864 22.7101ZM14.9173 24.377C13.1816 22.1769 12.0678 20.1338 11.677 18.421C11.5169 17.7792 11.4791 17.1131 11.5656 16.4573C11.6339 15.9766 11.8105 15.5176 12.0821 15.1148C12.4163 14.6814 12.8458 14.3304 13.3374 14.0889C13.829 13.8475 14.3696 13.7219 14.9175 13.7219C15.4655 13.722 16.006 13.8476 16.4976 14.0892C16.9892 14.3307 17.4186 14.6817 17.7528 15.1151C18.0244 15.5181 18.201 15.9771 18.2693 16.4579C18.3556 17.114 18.3177 17.7803 18.1573 18.4223C17.7661 20.1349 16.6526 22.1774 14.9173 24.377ZM27.7406 25.8689C27.6212 26.6908 27.2887 27.4674 26.7762 28.1216C26.2636 28.7759 25.5887 29.2852 24.8183 29.599C24.0393 29.9111 23.1939 30.0217 22.3607 29.9205C21.4946 29.8089 20.6599 29.5239 19.9069 29.0824C18.7501 28.4325 17.5791 27.4348 16.2614 25.9712C18.3591 23.3846 19.669 21.0005 20.154 18.877C20.3723 17.984 20.4196 17.0579 20.2935 16.1475C20.1791 15.3632 19.8879 14.615 19.4419 13.9593C18.9194 13.2519 18.2378 12.6768 17.452 12.2805C16.6661 11.8842 15.798 11.6777 14.9175 11.6777C14.0371 11.6777 13.1689 11.8841 12.383 12.2803C11.5971 12.6765 10.9155 13.2515 10.393 13.9589C9.94707 14.6144 9.65591 15.3624 9.5414 16.1465C9.41524 17.0566 9.4623 17.9822 9.68011 18.8749C10.1648 20.9993 11.4748 23.384 13.5732 25.9714C12.2555 27.4348 11.0845 28.4325 9.92769 29.0825C9.17468 29.5239 8.34007 29.809 7.47395 29.9205C6.64065 30.0217 5.79525 29.9111 5.0162 29.599C4.24581 29.2852 3.57092 28.7759 3.05838 28.1217C2.54585 27.4674 2.21345 26.6908 2.09411 25.8689C1.97932 25.0334 2.07701 24.1825 2.37818 23.3946C2.49266 23.0728 2.62663 22.757 2.7926 22.3818C3.0274 21.851 3.27657 21.3115 3.51759 20.7898L3.54996 20.7197C5.75643 15.9419 8.12481 11.0982 10.5894 6.32294L10.6875 6.13283C10.9384 5.64601 11.1979 5.14267 11.4597 4.6563C11.7101 4.15501 12.0132 3.68171 12.3639 3.2444C12.6746 2.86903 13.0646 2.56681 13.5059 2.35934C13.9473 2.15186 14.4291 2.04426 14.9169 2.04422C15.4047 2.04418 15.8866 2.15171 16.3279 2.35911C16.7693 2.56651 17.1593 2.86867 17.4701 3.24399C17.821 3.68097 18.1242 4.15411 18.3744 4.65538C18.6338 5.13742 18.891 5.63623 19.1398 6.11858L19.2452 6.32315C21.7097 11.0979 24.078 15.9415 26.2847 20.7201L26.3046 20.7631C26.5498 21.2936 26.8033 21.8419 27.042 22.382C27.2082 22.7577 27.3424 23.0738 27.4566 23.3944C27.7576 24.1824 27.8553 25.0333 27.7406 25.8689Z" fill="currentcolor"></path></svg></div>
        <div>
          <div className={`${show ? showBtn : ""} ${user}`} onClick={() => setShow(!show)}>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", strokeWidth: 3, color: "#222", fill: "none", height: "16px", width: "16px", stroke: "currentcolor", overflow: "visible" }}><g fill="none"><path d="M2 16h28M2 24h28M2 8h28"></path></g></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{ display: "block", height: "30px", color: "#717171", width: "30px", fill: "currentcolor" }}><path d="M16 .7C7.56.7.7 7.56.7 16S7.56 31.3 16 31.3 31.3 24.44 31.3 16 24.44.7 16 .7zm0 28c-4.02 0-7.6-1.88-9.93-4.81a12.43 12.43 0 0 1 6.45-4.4A6.5 6.5 0 0 1 9.5 14a6.5 6.5 0 0 1 13 0 6.51 6.51 0 0 1-3.02 5.5 12.42 12.42 0 0 1 6.45 4.4A12.67 12.67 0 0 1 16 28.7z"></path></svg>
            <div className={`${show ? showBtn : ""} ${userBtn}`}>
              <NavLink to={"/login"}>登录</NavLink>
              <NavLink to={"/register"}>注册</NavLink>
            </div>
          </div>
        </div>
      </div>
      <Sticky>
        {/* 导航栏 */}
        <div className={nav}>
          <div style={{ marginLeft: '-10px' }}>
            <span style={{ width: '28px', height: '50px', padding: '7px' }}><button onClick={godetails} style={{ background: '#fff', border: 'none', width: '28px', height: '18px', color: '#008486' }}><b>详情</b></button></span>
            <span><b>·</b></span>
            <span style={{ width: '28px', height: '50px', padding: '7px' }}><button onClick={goevaluate} style={{ background: '#fff', border: 'none', width: '28px', height: '18px', color: '#008486' }}><b>评价</b></button></span>

            <span><b>·</b></span>
            <span style={{ width: '28px', height: '50px', padding: '7px' }}><button onClick={goedate} style={{ background: '#fff', border: 'none', width: '56px', height: '18px', color: '#008486' }}><b>可订日期</b></button></span>
            <span><b>·</b></span>
            <span style={{ width: '28px', height: '50px', padding: '7px' }}><button  onClick={goposition} style={{ background: '#fff', border: 'none', width: '28px', height: '18px', color: '#008486' }}><b>位置</b></button></span>
            <span><b>·</b></span>
            <span style={{ width: '28px', height: '50px', padding: '7px' }}><button onClick={gonotice} style={{ background: '#fff', border: 'none', width: '28px', height: '18px', color: '#008486' }}><b>须知</b></button></span>
            <span><b>·</b></span>
            <span style={{ width: '28px', height: '50px', padding: '7px' }}><button onClick={golandlord} style={{ background: '#fff', border: 'none', width: '28px', height: '18px', color: '#008486' }}><b>房东</b></button></span>
          </div>
        </div>
      </Sticky>

      {/* banner大图 */}
      <div className={banner}>
        <img src={location.state.proinformation.banners[0]} alt="" />
        <div className={btn}>
          <button>
            <div>
              <UploadOutline style={{ fontSize: '16px', marginTop: '5px' }}></UploadOutline>
              <b style={{ padding: '5px', fontSize: '14px' }}>分享</b>
            </div>
          </button>
          <button>
            <div>
              <HeartOutline style={{ fontSize: '16px', marginTop: '5px' }} />
              <b style={{ padding: '5px', fontSize: '14px' }}>收藏</b>
            </div>
          </button>

        </div>
        <button className={bannerbtn} onClick={() => setVisible1(true)} style={{ width: '90px', height: '35px' }}>
          <div>
            <b style={{ padding: '5px', fontSize: '14px', color: "#484848" }}>查看照片</b>
          </div>
        </button>
      </div>
      {/* 详情 */}
      <div><span style={{ marginLeft: '24px', marginTop: '40px', display: "block", fontSize: '12px', color: '#734F21', width: "315px", height: '35px' }}><b>Naega-myeon, Ganghwa-gun · 露营车/房车里的合住房间</b></span></div>
      <h1><div style={{ marginLeft: '24px', width: '327px', height: '64px', color: "#484848" }}>在森林中露营，情绪化的室内装潢（小木屋/暖气）</div></h1>
      <div style={{ width: '343px', height: '37px', marginLeft: '24px', marginTop: '10px' }}> <Shop style={{ fontSize: '16px' }} /><span style={{ fontSize: "16px", color: "#484848" }}>1张床</span>
        <span style={{ marginLeft: '100px' }}><TeamFill /><span style={{ fontSize: "16px", color: "#484848" }}>可住3人</span></span>
        <div><Cart /><span style={{ fontSize: '16px', color: "#484848" }}>0个公共卫生间</span></div>
      </div>
      <div style={{ width: '327px', height: "65px", marginLeft: "24px", marginTop: "10px", display: 'flex', flexWrap: 'wrap', paddingBottom: '35px', borderBottom: '1px solid #ccc' }}>
        <div style={{ marginRight: "5px", width: "96px", height: '24px', background: '#EAF7EA', borderRadius: "12px", overflow: 'hidden' }}><span style={{ color: "#2A6E00" }}><b style={{ display: "block", fontSize: '12px', marginLeft: '10px', marginTop: '5px' }}>5.0分 · 1条评论</b></span></div>
        <div style={{ marginRight: "5px", width: '65px', height: "24px", background: "#F3F3F3", borderRadius: "12px", overflow: 'hidden' }}><b style={{ color: "#484848", fontSize: "12px", marginLeft: '10px', marginTop: '5px', display: "block" }}>自助入住</b></div>
        <div style={{ marginRight: "5px", width: '65px', height: "24px", background: "#F3F3F3", borderRadius: "12px", overflow: 'hidden' }}><b style={{ color: "#484848", fontSize: "12px", marginLeft: '10px', marginTop: '5px', display: "block" }}>免费停车</b></div>
        <div style={{ marginRight: "5px", width: '65px', height: "24px", background: "#F3F3F3", borderRadius: "12px", overflow: 'hidden' }}><b style={{ color: "#484848", fontSize: "12px", marginLeft: '10px', marginTop: '5px', display: "block" }}>可以做饭</b></div>
        <div style={{ marginRight: "5px", width: '65px', height: "24px", background: "#F3F3F3", borderRadius: "12px", overflow: 'hidden' }}><b style={{ color: "#484848", fontSize: "12px", marginLeft: '10px', marginTop: '5px', display: "block" }}>烧烤区</b></div>
      </div>
      <div style={{ width: '327px', height: '226px', marginLeft: '24px', borderBottom: '1px solid #ccc', paddingBottom: '40px' }}>
        <div style={{ fontSize: '16px', color: '#484848', marginTop: '30px' }}><b>合住房间</b></div>
        <div style={{ fontSize: '16px', color: '#484848', marginTop: '10px' }}>与他人共享卧室以及其他空间</div>
        <div style={{ fontSize: '16px', color: '#484848', marginTop: '30px' }}><b>入住/退房</b></div>
        <div style={{ fontSize: '16px', color: '#484848', marginTop: '10px' }}>入住时间 下午3:00 - 晚上10:00、退房时间 上午11:00</div>
        <div style={{ fontSize: '16px', color: '#484848', marginTop: '30px' }}><b>自助入住</b></div>
        <div style={{ fontSize: '16px', color: '#484848', marginTop: '10px', paddingBottom: '35px' }}>通过大楼工作人员自助入住</div>
      </div>
      <div style={{ width: '327px', height: '34px', marginLeft: "24px" }}>
        <div style={{ width: '96px', height: '34px' }}>
          <h1 style={{ fontSize: '24px', marginTop: "40px" }}>房客评价</h1>
        </div>
      </div>
      {/* 房客评价 */}
      {
        evaluate.map((item: any) => <div style={{ borderTop: '1px solid #ccc', paddingTop: "20px", width: '327px', height: '48px', marginLeft: "24px", marginTop: '40px' }}>
          <div >
            <div style={{ display: "flex", width: "48px", height: '48px' }}>
              <img style={{ width: "48px", height: "48px", borderRadius: "35px" }} src={item.postmanimg} />
              <b style={{ fontSize: "16px", color: '#484848', marginLeft: '20px' }}>{item.proname} <div style={{ width: "100px", fontSize: "14px", color: '#484848' }}>{item.date}</div></b>
            </div>
          </div>
          <div style={{ width: "327px", height: '88px', marginTop: "20px" }}>{item.appraise}</div>
        </div>)
      }
        {/* 可订日期 */}
        <div style={{marginTop:'100px',marginLeft:'24px'}}>
          <h1>可订日期</h1>
       <div style={{marginTop:"40px"}}>
       <Calendar
                className='calendar-custom'
                selectionMode='range'
                value={val}
                onChange={val => {
                  setVal(val)
                  setDate(`${val && val[0].getMonth() + 1}月${val && val[0].getDate()}日至${val && val[1].getMonth() + 1}月${val && val[1].getDate()}日`)
                }}
              />
       </div>
        </div>
      {/* 房源位置 */}
      <div style={{ width: "327px", height: "34px", marginLeft: '24px', paddingTop: "110px" }}>
        <h1>房源位置</h1>
        <div style={{ marginTop: "30px" }}><b style={{ fontSize: "16px", color: "#484848" }}>泰国, 曼谷直辖市, 惠恭王县, เขตห้วยขวาง</b></div>
        <div style={{ width: "318px", fontSize: '16px', marginTop: "10px" }}>66RCA alley CLUB、76garage男模主题餐厅、huaikwang夜市（本地人的最爱）、金东尼人妖秀、各种中餐馆和粤菜餐馆
          -商场：拉查达 THE STREET 购物中心 尚泰Roma9购物中心 拉差达火车夜市等。
          -SPA:Smile Massage、和利古法抓龙筋等。
          <div>
            <button style={{ width: '68px', height: "22px", marginTop: "20px", border: "0", background: "#fff" }}><b style={{ color: '#008489', fontSize: "16px" }}>查看更多</b></button>
            <AMapExample></AMapExample>
            <div id="mapContainer" style={{ width: '100%', height: '100%' }} ></div>
            <div style={{ width: "327px", height: "240px" }}>
              <div style={{ height: "44px", marginTop: "24px" }}><CameraOutline /><span style={{ fontSize: "16px", color: "#484848", marginLeft: "10px" }}>周边热门：Sky Bar（约100米）、帕蓬夜市（约1.8公里）、是隆夜市（约1.9公里）</span></div>
              <div style={{ height: "44px", marginTop: "24px" }}><Logistics /><span style={{ fontSize: "16px", color: "#484848", marginLeft: "10px" }}>附近地铁站：郑皇桥（约400米）、素拉胜（约600米）、崇暖诗（约1.4公里）</span></div>
              <div style={{ height: "44px", marginTop: "24px" }}><TruckOutline /><span style={{ fontSize: "16px", color: "#484848", marginLeft: "10px" }}>机场 / 火车站：廊曼国际机场（约23.4公里）、华蓝蓬火车总站（约2.0公里）</span></div>
            </div>
          </div>
        </div>
      </div>
      {/* 预定须知 */}
      <div style={{ width: "327px", height: "594px", marginTop: "750px", marginLeft: "24px" }}>
        <div><h1 style={{ fontSize: "24px", color: "#484848" }}>预订须知</h1></div>
        <div style={{ marginTop: "30px", fontSize: '16px', color: "#484848" }}><b>房屋守则</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>不允许携带宠物</div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>不允许举办派对和活动</div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>允许吸烟</div>
        <div style={{ marginTop: "30px", fontSize: '16px', color: "#484848" }}><b>取消政策</b></div>
        <div style={{ marginTop: "15px", fontSize: '16px', color: '#484848' }}><b>添加入住退房日期后，可查看取消政策详情</b></div>
        <div style={{ marginTop: "30px", fontSize: '16px', color: "#484848" }}><b>安全须知</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>安防监控/摄录设备</div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>已安装一氧化碳报警器</div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>已安装烟雾报警器</div>
        <div style={{ marginTop: "30px", fontSize: '16px', color: "#484848" }}><b>安全预订</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>为了保护您的账号隐私及付款安全，请勿妄信第三方预订代理提供的折扣或礼金券，也不要在爱彼迎网站或App之外汇款或沟通。</div>

      </div>
      {/* 房东 */}
      <div style={{ width: "327px", height: "613px", marginLeft: "24px", position: 'relative' }}>
        <h1 style={{ fontSize: "24px", color: "#484848" }}>房东</h1>
        <div style={{ width: "343px", height: "68px" }}>
          <div style={{ marginTop: "40px" }}><b>Mayuree</b></div>
          <div style={{ marginTop: "10px" }}><b>注册时间：2015年11月</b></div>
          <span><img style={{ width: "64px", height: "64px", borderRadius: "32px", position: "absolute", right: '30px', top: "70px" }} src="https://t7.baidu.com/it/u=190389935,2049892857&fm=193&f=GIF" alt="" /></span>
        </div>
        <div style={{ marginTop: "30px", fontSize: '16px', color: "#484848" }}><b>与房客的互动</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>住宿期间，整个房源都归您使用，但如果您需要任何指导或任何类型的帮助，可以随时联系我。</div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}><span>语言：</span><b>English、ภาษาไทย</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}><span>回复率：</span><b>100%</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}><span>回复时间：</span><b>平均 10 分钟</b></div>
        <div style={{ marginTop: "30px", fontSize: '16px', color: "#484848" }}><b>合作达人</b></div>
        <div style={{ fontSize: "16px", color: "#484848", marginTop: "10px" }}>Pariyakorn帮忙处理出租待客事宜。</div>
        <div style={{ marginTop: "10px" }}><img style={{ width: "60px", height: "60px", borderRadius: '30px' }} src="https://img1.baidu.com/it/u=4153709490,1632667717&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=499" alt="" /></div>


      </div>
      {/* 可能喜欢 */}
      <div style={{ width: "327px", height: "470px", marginLeft: "24px", position: 'relative', borderBottom: "1px solid #ccc" }}>
        <div>
          <h1 style={{ fontSize: "24px", color: "#484848" }}>您可能还喜欢</h1>
          <Swiper loop={true} indicator={() => null}>{items}</Swiper>

        </div>
      </div>
      {/* <div style={{ width: "327px", height: "613px", marginLeft: "24px", position: 'relative' }}>
      <div>
        <h1 style={{ fontSize: "24px", color: "#484848" }}>您可能还喜欢</h1>
        <div style={{ width: "339px", height: "336px" ,marginTop:"20px"}}>
          <img style={{width:"327px",height:"218px"}} src="https://z1.muscache.cn/im/pictures/aab9bec6-8626-47a0-8718-7d8cc131da48.jpg?im_w=720" alt="" />
          <div style={{fontSize:"16px",color:"#484848",marginTop:"20px"}}><b>Tambon Mu Si、黑龙江</b></div>
          <div><span>￥</span><span>3,699</span>每晚</div>
        <div style={{marginTop:"10px"}}>  ★★★★★  5.0</div>
        </div>
      </div>
      </div> */}
      {/* foot */}
      <div style={{ width: "375px", height: "137px" }}>
        <div style={{ width: "298", height: "84px", color: '#767676', fontSize: "14px", marginLeft: "24px", marginTop: "18px" }}>
          <b style={{ lineHeight: "24px" }}>京ICP备16017121号京ICP证 160773号  京公网安备 11010502032345号安彼迎网络（北京）有限公司营业执照</b>

          <div>© 2023 Airbnb, Inc. All rights reserved.</div>
        </div>
      </div>
      {/* 底部 */}
      <div style={{ overflow: "hidden", width: "375px", transition: "all 0.3s ease", height: `${height}px`, background: "#fff", position: "sticky", bottom: "0" }}>
        <div style={{ marginTop: "14px", position: 'relative' }}>
          <span style={{ marginLeft: "24px", marginTop: "30px" }}><b style={{ fontSize: "22px", color: "#484848" }}>￥{location.state.proinformation.price}</b>/晚</span>
          <div style={{ marginLeft: "24px" }}>★★★★★ {location?.state.proinformation.score}</div>
        </div>
        <div style={{ position: "absolute", left: "165px", top: '16px' }}>
          <button onClick={go} style={{ width: "180px", height: "46px", background: "#FF5A5F", border: "none", borderRadius: "5px", fontSize: "16px", color: "#fff" }}><b>预定</b></button>
        </div>
      </div>
      {/* 组件 */}
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '100%' }}
      >
        {/* 弹出层 */}
        <header className={wishHeader}>
          <span onClick={() => { setVisible1(false) }}>X</span>
          <b>房源图片 · 3 张</b>
        </header>
        <div className={wishMain}>
          {/* <div style={{paddingTop:'40px'}}>
          <img src= "https://z1.muscache.cn/im/pictures/03b6cb80-e1a3-43c6-8a7a-a04e7205caa5.jpg?im_w=720" alt="" />
         </div>
         <div>
          <img src= "https://z1.muscache.cn/pictures/miso/Hosting-39113140/original/31bda3ee-5bfa-4b7a-87c4-615928e1d4b9.jpeg?im_w=720" alt="" />
         </div>
         <div style={{marginBottom:'40px'}}>
          <img src= "https://z1.muscache.cn/im/pictures/miso/Hosting-39113140/original/542ab8a2-287a-4be1-ad8d-268f51b6b6f9.jpeg?im_w=1200" alt="" />
         </div>
         <div className={footer}>
        <button onClick={()=>{ setVisible1(false)}}><b>返回房源</b></button>
         </div> */}
          <div style={{ paddingTop: '0px' }}>
            {

              banners.map((ite: any, i: any) => <img style={{ marginBottom: '20px' }} src={ite} key={i} />)

              // list.map((item):any=>item.banners.map((ite:any,i:any)=><img src={ite} key={i}/>))
            }
          </div>
          <div className={footer}>
            <button onClick={() => { setVisible1(false) }}><b>返回房源</b></button>
          </div>
        </div>
      </Popup>
    </div>
  </body>)
}
export default App